<template>
<div id="nav" class="body">
  <header>
    <nav class="text-center">
      <ul class="inline-block">
        <li class="pull-left active"><a href="#" data-direction="front">Home</a></li>
        <li class="pull-left"><a href="#" data-direction="back">Portfolio</a></li>
        <li class="pull-left"><a href="#" data-direction="top">About</a></li>
        <li class="pull-left"><a href="#" data-direction="right">Contact</a></li>
        <li class="clearfix"></li>
      </ul>
    </nav>
  </header>
  <div id="wrap">
    <div class="cube">
      <section id="home" class="page active face front">
        <div class="act-table text-center">
          <div class="act-table-cell ver-middle">
            |Home Page
          </div>
        </div>
      </section>
      <section id="portfolio" class="page face back">
        <div class="act-table text-center">
          <div class="act-table-cell ver-middle">
            |Portfolio Page
          </div>
        </div>
      </section>
      <section id="about" class="page face top">
        <div class="act-table text-center">
          <div class="act-table-cell ver-middle">
            |about Page
          </div>
        </div>
      </section>
      <section id="contact" class="page face right">
        <div class="act-table text-center">
          <div class="act-table-cell ver-middle">
            |contact Page
          </div>
        </div>
      </section>
      <section id="blog" class="page face bottom">
        <div class="act-table text-center">
          <div class="act-table-cell ver-middle">
            |blog Page
          </div>
        </div>
      </section>
      <section id="article" class="page face left">
        <div class="act-table text-center">
          <div class="act-table-cell ver-middle">
            |article Page
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
  name: "nav",
  data: () => ({

  }),
  methods: {
    init() {
      var myList = [{
          id: 3,
          name: "defore",
          good: "25%"
        },
        {
          id: 2,
          name: "tom",
          good: "12.5%"
        },
        {
          id: 4,
          name: "dd",
          good: "-10.52%"
        },
        {
          id: 1,
          name: "boy",
          good: "98%"
        },
        {
          id: 7,
          name: "aaa",
          good: "-50%"
        },
        {
          id: 1,
          name: "mm",
          good: "7%"
        },
      ]

      function sortByKey(list, key) {
        list = list.slice(0);
        // return list.sort(compare('name'));
        return list.sort(compare('id'))
      }

      function compare(property) {
        return function(a, b) {
          var value1 = a[property];
          var value2 = b[property];
          var result = 0;
          //return value1 - value2;
          // 百分数计算
          if ((typeof value1 === 'string' && value1.indexOf('%') > -1) || (typeof value2 === 'string' && value2.indexOf('%') > -1)) {
            result = parseFloat(value2) - parseFloat(value1)
          } else {
            result = value2 > value1 ? 1 : value2 < value1 ? -1 : 0;
          }
          return result;
        }
      }

      var result = sortByKey(myList, "name");
      console.log("myList", myList);
      console.log("result", result);
    }
  },
  mounted() {
    //do something after mounting vue instance
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.body {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    width: 100vw;
    height: 100vh;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
.inline-block {
    display: inline-block;
}
.act-table {
    display: table;
}
.act-table-cell {
    display: table-cell;
}
a,
a:active,
a:focus,
a:hover {
    text-decoration: none;
    color: inherit;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}
.pull-right {
    float: right;
}
.pull-left {
    float: left;
}
.ver-middle {
    vertical-align: middle;
}
header {
    position: fixed;
    top: 8px;
    left: 0;
    right: 0;
    z-index: 100;
    transition: 1s;
    &.go-out {
        top: -150px;
    }
    nav ul {
        background-color: rgba(255, 255, 255, 0.2);
        overflow: hidden;
        border-radius: 5px;
        li {
            color: #fff;
            a {
                width: 100px;
                max-width: 150px;
                height: 32px;
                display: block;
                padding-top: 13px;
            }
            &.active {
                a,
                a:hover {
                    background-color: rgba(255, 255, 255, 0.2);
                }
            }
            &:hover {
                a {
                    background-color: rgba(255, 255, 255, 0.1);
                }
            }
        }
    }
}
.page {
    background-color: rgba(0, 0, 0, 0.2);
    .act-table {
        width: 100%;
        height: 100%;
        .act-table-cell {
            font-size: 100%;
            font-weight: 500;
            color: #fff;
        }
    }
    &.active {
        z-index: 50;
    }
}
#wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transition: 0.8s;
    &.active {
        top: 10%;
        bottom: 10%;
        right: 10%;
        left: 10%;
    }
}
.cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transition: 1s;
    &.reverse-back {
        transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg);
        .back {
            transform: translateZ(-800px) rotateY(-180deg);
        }
    }
    &.reverse-left {
        .left {
            transform: translateX(-800px) rotateY(-90deg);
        }
    }
    &.reverse-right {
        transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg);
        .right {

            transform: translateX(800px) rotateY(90deg);
        }
    }
    &.reverse-top {
        transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
        .top {
            transform: translateY(-400px) rotateX(90deg);
        }
    }
    &.reverse-bottom {
        .bottom {
            transform: translateY(400px) rotateX(-90deg);
        }
    }
}
.face {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 18px;
    text-align: center;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}
.front {
    background-color: #28aadc;
}

.front.active {
    transform: translateZ(800px);
}

.back {
    background-color: #ff3366;
}
.back:not(.active) {
    transform: translateZ(-800px) rotateY(-180deg);
}
.back .active {
    transform: translateZ(800px);
}
.left:not(.active) {
    transform: translateX(-800px) rotateY(-90deg);
    -webkit-transform: translateX(-800px) rotateY(-90deg);
    -moz-transform: translateX(-800px) rotateY(-90deg);
}

.left .active {
    transform: translateZ(800px);
    -webkit-transform: translateZ(800px);
    -moz-transform: translateZ(800px);
}

.right {
    background-color: #000;
}
.right:not(.active) {
    transform: translateX(800px) rotateY(90deg);
    -webkit-transform: translateX(800px) rotateY(90deg);
    -moz-transform: translateX(800px) rotateY(90deg);
}

.right .active {
    transform: translateZ(800px);
    -webkit-transform: translateZ(800px);
    -moz-transform: translateZ(800px);
}

.top {
    background-color: #FFAD33;
}
.top:not(.active) {
    transform: translateY(-400px) rotateX(90deg);
}

.top .active {
    transform: translateZ(800px);
}
.bottom:not(.active) {
    transform: translateY(400px) rotateX(-90deg);
}

.bottom .active {
    transform: translateZ(800px);
}
</style>
